import {initState} from './observe'
import Watcher from "./observe/watcher";
import {compiler,query} from "./util";

function Vue(options){ // vue中原始用户传入的数据
    this._init(options); // 初始化vue 并且将用户选项传入
}

Vue.prototype._init = function (options) {
    // vue中初始化  this.$options 表示的是vue中参数
    let vm = this;
    vm.$options = options;

    // MVVM原理 需要数据重新初始化
    // 拦截 对象成员 和 数组方法
    initState(vm); // data computed watch

    // ....

    if (vm.$options.el) {
        vm.$mount()
    }
};

Vue.prototype.$mount = function () {
    const vm = this;
    let el = vm.$options.el;
    el = vm.$el = query(el);

    const updateComponent = () => { // 更新组件、 渲染的逻辑
        vm._update();
    };

    // 渲染通过 watcher来渲染(数据一变,就会重新渲染)
    // 这种watcher叫做 渲染watcher
    // 一个组件对应一个watcher vue2.0是组件级别更新
    new Watcher(vm,updateComponent);
};

//↓vue1.x写法
Vue.prototype._update = function () {
    // 用用户传入的数据 去更新视图
    const vm = this;
    const el = vm.$el;

    // 将页面里的内容换成我们的数据
    const node = document.createDocumentFragment();
    let firstChild;
    while (firstChild = el.firstChild){
        node.appendChild(firstChild);
    }
    compiler(node, vm); // 编译vue的模板语法
    el.appendChild(node);
};

export default Vue
